<template>
  <div class="app-container">
    <div class="flex justify-between">
      <div class="flex flex-wrap">
        <div>
          <span>用户编号：</span>
          <el-input
            v-model.number="listQuery.user_code"
            class="marginRB10"
            clearable
            placeholder="请输入用户编号"
            style="width: 200px"
          ></el-input>
        </div>
        <div>
          <span>用户昵称：</span>
          <el-input
            v-model.number="listQuery.nickname"
            class="marginRB10"
            clearable
            placeholder="请输入用户昵称"
            style="width: 200px"
          ></el-input>
        </div>
        <el-button
          class="marginRB10"
          icon="el-icon-search"
          type="primary"
          @click="handleSearch"
        >搜索
        </el-button>
        <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
      </div>
    </div>

    <el-table
      ref="dataList"
      :data="tableData"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="margin-bottom: 20px"
    >
      <el-table-column label="序号" type="index" :index="indexMethod" width="80" prop="number"></el-table-column>
      <el-table-column label="添加日期" prop="updated_at"></el-table-column>
      <el-table-column label="操作账号" prop="admin_name"></el-table-column>
      <el-table-column label="操作内容" prop="describe"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="用户编号" prop="user_code"></el-table-column>
      <el-table-column label="用户昵称" prop="nickname"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :limit.sync="listQuery.pageSize"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  logList
} from '@/api/member/whiteList'

export default {
  name: 'welcome',
  data() {
    return {
      confirmBtn: false,
      listLoading: true,
      total: 0,
      listQuery: {
        user_code: '',
        nickname: '',
        page: 1,
        pageSize: 10
      },
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    indexMethod(index) {
      return this.tableData.length - index
    },
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      logList(this.listQuery).then(({ data }) => {
        this.tableData = data.list
        this.total = data.meta.total
        this.listLoading = false
        this.confirmBtn = false
      })
    },
    
    resetForm() {
      this.form = {
        name: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    },
    resetSubmit() {
      this.listQuery = {
        page: 1,
        pageSize: 10
      }
      this.getList()
    },
    onChange() {
    }
  }
}
</script>
